<template>
    <div class="container" v-loading="loading">
        <el-form ref="form" :model="form" label-width="100px" size="mini">
            <el-form-item label="表格名称">
                <el-input v-model="form.bgmc" disabled></el-input>
            </el-form-item>
            <el-form-item label="内容描述">
                <el-input type="textarea" disabled v-model="form.nrms" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
            </el-form-item>
            <el-form-item label="截止日期">
                <el-input v-model="form.tbjzrq" disabled>
                </el-input>
            </el-form-item>
            <el-form-item label="表格附件">
                <div class="uploadBox">
                    <span class="undertxt" style="margin-right:20px;" v-if="fileName!=''" @click="downExcel(form.bgfj,form.wjmc)">{{fileName}}</span>
                    <!-- <el-upload class="upload-demo" ref="upload" :before-upload="beforeUpload" action :show-file-list="false" :http-request="httpRequest" :multiple="false" accept=".xls,.csv,.xlsx">
                        <el-button size="mini" type="primary">导入</el-button>
                    </el-upload> -->
                </div>

            </el-form-item>
            <el-form-item label="下发对象">
                <!-- <div>
                    <el-button size="mini" type="primary" @click="getqueryXfdx()">默认对象</el-button>
                </div> -->
                <!-- <div class="btnC">
                    <el-button type="danger" size="mini" class="mybtn" @click="delxfdx()"><i class="el-icon-minus"></i></el-button>
                    <el-button type="danger" size="mini" class="mybtn" @click="addxfdx()"><i class="el-icon-plus"></i></el-button>
                </div> -->
                <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center">
                    </el-table-column>
                    <el-table-column prop="jsdwmc" label="接收单位" align="center">

                    </el-table-column>
                    <el-table-column prop="jsr" label="接收人" align="center">
                    </el-table-column>
                    <el-table-column prop="tbzt" label="填报信息" align="center">
                        <template slot-scope="scope">
                            <span class="undertxt" v-if="scope.row.tbzt !='未填报'" @click="downExcel(scope.row.bgxx,scope.row.xfdxwjmc)">{{scope.row.xfdxwjmc}}</span>
                            <span v-else>{{scope.row.tbzt}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="创建时间">
                        <el-input v-model="form.cjrq" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="form.cjr" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item>
                <div style="text-align:center;">

                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
// require component
import { queryXfdx, querySwjg, querySwry, add, queryById } from '@/api/zcgj/gxbg'

export default {

    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            loading: false,
            form: {
                bgmc: '',
                nrms: '',
                tbjzrq: '',
                xfdxList: '',
                cjrq: '',
                cjr: '',


            },
            file: '',
            fileName: '',
            jsdwOption: [],
            jsrOption: [],
            tableData: [
                // { swjgdm: '', jsdwmc: '', userId: '', jsr: '', tbzt: '未填报', jsrOption: [] }
            ],
            docSelect: [],
            rules: {
                swjgdm: [
                    { required: true, message: '请选择状态', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.getById()
    },
    methods: {
        getById() {
            this.loading = true
            this.tableData = []
            queryById({ id: this.id }).then(res => {
                console.log(res)
                this.loading = false
                this.form = res.data.gxbgSjsc
                this.fileName = res.data.gxbgSjsc.wjmc
                this.tableData = res.data.xfdxList


            })
        },

        downExcel(file,fileName) {
            var raw = window.atob(file);
            var uInt8Array = new Uint8Array(raw.length);
            for (var i = 0; i < raw.length; i++) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            const blob = new Blob([uInt8Array], {
                type: "application/msword"
            });


            const elink = document.createElement("a");
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        },











        handleSelectionChange(rows) {
            console.log(rows)
            this.docSelect = rows
        },
        //获取模型指标option
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }
    .btnC {
        text-align: right;
        margin-bottom: 2px;

        .mybtn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
        }
    }
    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .uploadBox {
        display: flex;
        justify-self: start;
    }
}
::v-deep .undertxt {
    color: rgb(64, 158, 255);
    cursor: pointer;

    &:hover {
        text-decoration: underline;
    }
}
</style>